iT邦幫忙

DAY 8
2

Front to Back, Node.js系列 第 8

JavaScript Array - Node.js day 8

  • 分享至 

  • xImage
  •  

今天要討論 Array,在 Array 是個很重要的物件型態,在 JavaScript 裡面有許多 Array 好用的方式,這次將會為大家介紹 Array 優秀之處。
JavaScript Array

前言

今天要討論 Array,在 Array 是個很重要的物件型態,在 JavaScript 裡面有許多 Array 好用的方式,這次將會為大家介紹 Array 優秀之處。

內文

陣列也是屬於 JavaScript 的原生物件之一,在實際開發會有許多時候需要使用 Array 的方法,先來介紹一下陣列要怎麼宣告。

陣列宣告

宣告方式,

	var a=['a', 'b', 'c'];
	
	var a=new Array('a', 'b', 'c');

以上這兩種方式都可以宣告成陣列,接著我們將 a 這個變數印出來看一下,

	console.log(a);
	//print: [0, 1, 2]

Array 的排列指標從 0 開始,像上面的例子來說, a 的指標就有三個,0, 1, 2,如果要印出特定的某個陣列數值,使用方法,

	console.log(a[1]);
	//print: b

如果要判斷一個變數是不是 Array 最簡單的方式就是直接使用 Array 的原生方法,

	var a=['a', 'b', 'c'];
	
	console.log(Array.isArray(a));
	//print: true
	
	var b='a';
	console.log(Array.isArray(b));
	//print: false

如果要取得陣列變數的長度可以直接使用,

	console.log(a.length);

length 為一個常數,型態為 Number,會列出目前陣列的長度。

pop, shift

以前面所宣告的陣列為範例,

	var a=['a', 'b', 'c'];

使用 pop 可以從最後面取出陣列的最後一個值。

	console.log(a.pop());
	//print: c
	
	console.log(a.length);
	//print: 2

同時也可以注意到,使用 pop 這個方法之後,陣列的長度內容也會被輸出。

另外一個跟 pop 很像的方式就是 shift,

	console.log(a.shift());
	//print: a
	
	console.log(a.length);
	//print: 1

shift 跟 pop 最大的差異,就是從最前面將數值取出,同時也會讓呼叫的陣列少一個數組。

slice

前面提到 pop, shift 就不得不說一下 slice,使用方式,

	console.log(a.slice(1,3));
	//print: 'b', 'c'

第一個參數為起始指標,第二個參數為結束指標,會將這個陣列進行切割,變成一個新的陣列型態。
如果需要給予新的變數,就可以這樣子做,完整的範例。

	var a=['a', 'b', 'c'];
	
	var b=a.slice(1,3);
	
	console.log(b);
	//print: 'b', 'c'

concat

concat 這個方法,可以將兩個 Array 組合起來,

	console.log(a);
	//print: [0, 1, 2]

0

concat 會將陣列組合,之後變成全新的數組,如果以例子來說,a 陣列希望變成 ['a', 'b', 'c'],可以重新將數值分配給 a,範例來說

	console.log(a);
	//print: [0, 1, 2]

1

Iterator

陣列資料,必須要有 Iterator,將資料巡迴一次,通常是使用迴圈的方式,

	console.log(a);
	//print: [0, 1, 2]

2

事實上可以用更簡單的方式進行,

	console.log(a);
	//print: [0, 1, 2]

3

在 Array 裡面可以使用 foreach 的方式進行 iterator, 裡面給予的 function (匿名函式),第一個變數為 Array 的 Value, 第二個變數為 Array 的指標。

結語

陣列大致上就先介紹到此為止,在實戰應用的時候,會有更多時間點使用 Array 的原生型態,或者進行 Array 的組合分割技巧,在這邊就先以基本的 Array 方法為主。

明天會進入 function, class 的方法,這些部份,有些東西漸漸的會變得比較隱晦,我也不想去解釋太多,畢竟這邊是以實戰為主,就一起來期待明天吧!


上一篇
Null & undefined 型態差異 - Node.js day 7
下一篇
JavaScript 的神奇方法 function - node.js day 9
系列文
Front to Back, Node.js21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-10-16 00:17:45

Iterator

沙發

0/1/2/3 程式碼似乎怪怪滴,好像有些指令神隱了....疑惑

我要留言

立即登入留言